<template>
  <!--
    action: 上传地址(必填)
    show-file-list: 文件上传的列表(标签下出现已上传成功的文件名等) 默认 true
    on-success: 文件上传成功的钩子,回调右侧的函数执行,组件内会给我们传值(upload传值,本组件接收) 前端 -> 后端 上传成功后才执行
    before-upload: 文件上传之前的钩子,(函数内 return false 或 失败的promise状态,upload组件会停止向后端上传操作)
    http-request 使用之后,默认上传的内部 ajax 就不在执行
    action写了也没用了(但是upload组件一定要写),也不会执行 on-success 的回调函数了
   -->
  <el-upload class="avatar-uploader"
     action=""
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
    :http-request="customRequestUpload"
    >
      <!-- 插槽? 看 imgUrl 里有图片地址,就显示图片,否则显示 + 号 -->
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      <el-progress type="circle" v-show="progressShow" :percentage="percentNum" class="progress"></el-progress>
  </el-upload>
</template>

<script>
  // 明确目标: 找组件、用组件、读组件、改组件
  var COS = require('cos-js-sdk-v5');
  // SECRETID 和 SECRETKEY 请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
  var cos = new COS({
      SecretId: 'AKID33xiMrEl8MRNBsRr7KQellcMyVxJgv32',
      SecretKey: 'uk9TaXTHvMfrtlUEo8B51mLhw2xhKqDO',
  });
  export default {
    name: 'UploadIndex',
    props: {
      img: {
        type: String,
        default: ''
      },
    },
    data() {
      return {
        imageUrl: '', // 上传成功的图片地址(外链/blob)
        progressShow: false, // 进度条显示 / 隐藏
        percentNum: 0, // 上传进度条的数字显示
      }
    },
    methods: {
      // 文件上传成功到后台,后的回调函数
      handleAvatarSuccess(res, file) { // 定义自定义请求后该回调函数失效
        // res: 后端返回的响应数据,(upload内部自带 ajax 请求,不会走 axios)
        // file: 前端本地磁盘里,上传到服务器上,的这个文件对象信息
        // Object Array URL …… 都是JS内置的对象(无需声明直接使用)
        // URL.createObjectURL()方法,此方法会把文件数据,转成 bloob:临时前端地址
        // 可以用于 img 临时加载此前端的文件在浏览器上 img 标签中显示
        // 文件 -> 图片本地临时地址
        // 知识点: img标签的 src 属性(值: 图片的base64字符串、外链地址、相对地址、blob临时地址)
        // 知识点2: 想要做成图片的预览
        // 思路1: 上传文件到服务器,让后端返回图片在服务器端外链地址,加载给 img 标签 src 属性做图片,预览(必须上传成功),这里用不了这种办法
        // 思路2: 纯前端(无需上传到服务器),图片文件显示到页面上(URL.createObjectURL(文件对象) -> 转成临时 blob 地址)
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      // upload 上传图片到后台,前的一个判断函数
      beforeAvatarUpload(file) {
        // file 本地上传到浏览器上的文件对象
        // file.type 传递的这个文件类型(值有几个固定格式,mime媒体类型(百度查查))
        // 'img/jpeg' -> jpeg结尾的文件图片, 'img/png' -> png结尾的文件图片,
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message('上传头像图片只能是 JPG 格式!','error');
        }
        if (!isLt2M) {
          this.$message('上传头像图片大小不能超过 2MB!','error');
        }
        return isJPG && isLt2M;
      },
      customRequestUpload(obj){
        // console.log(obj) // 上传的文件对象
        this.progressShow = true
         cos.uploadFile({
              Bucket: 'bb-1301746596', /* 填写自己的(存储桶名字)，必须字段 */
              Region: 'ap-guangzhou',     /* 存储桶所在地域，必须字段 */
              Key: obj.file.name,              /* 存储在桶里的对象键(图片的名字,需要保持唯一性,唯一标识)（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */
              Body: obj.file, // 上传文件对象
              SliceSize: 1024 * 1024 * 2,     /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */
              onProgress: (progressData) => { // 文件上传中的函数,进度函数?
              // progressData 内 percent 是我们所需要的属性,上传开始是0,上传结束是1
                this.percentNum = progressData.percent * 100 // 得到的是 0-1的数字,我们需要 *100 转换
              }
          }, (err, data) => {
            console.log(err,data)
            // 得到腾讯云返回的结果是一个外链,我们需要的是 Location 属性字段的值
            // 注意: 外链必须以 http:// 开头
            this.imageUrl = 'http://' + data.Location
            // this.$emit('update:img',this.imageUrl)
            setTimeout(() => {
              this.progressShow = false
            },1000)
          });
      }
    }
  }
</script>

<style>
  .progress {
    position: absolute;
    display: flex;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #e4e4e4;
    border-radius: 50%;
    opacity: 0.9;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
